<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>J query的选择器与遍历</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css"/>
    <link rel="stylesheet" href="./css/jqppt.css"/>
    <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>


<!--第一部分-->
<div class="bg">
    <div class="container header">
            <img src="./img/shoto.png" alt=""/>
        <div style="padding-top: 50px;">
            <div class="span6">
                <h2 style="color: white;padding-top: 90px;">J query的选择器与遍历</h2>
                <p style="color:white;padding-top: 40px;">东西很多，所以大概抽选了一些出来</p>
                <div style="padding-top: 50px;">
                    <a href="#"><img src="./img/appStore.png" alt=""/></a>
                    <a href="#"><img src="./img/GooglePlay.png" alt=""/></a>
                </div>
                <div style="margin-top: 50px;">
                    <input type="text" name="phone" placeholder="Get Shoto. Enter phone #" style="width: 224px;height:27px; font-size: 18px;border-radius: 6px;">
                    <button class="anniu" >搜</button>
                </div>
            </div>
            <div class="span6" style="margin-top:-500px;float: right;">
                <img src="./img/galaxy.png" alt=""/>
            </div>
        </div>
    </div>
</div>
<!--属性选择器-->
<div class="bg1">
    <div class="row container" >
        <div class="span6" >
            <img src="./img/1.png" alt=""/>
        </div>
        <div class="span5" >
            <h2 style="color:#3399ff; padding-top: 50px;">属性选择器</h2>
            <p>Attribute Contains Prefix Selector [name|="value"]</p>
            <p>选择指定属性值等于给定字符串或以该字符串为前缀（该字符串后跟一个连字符“-” ）的元素。</p>
            <p>Attribute Contains Selector [name*="value"]</p>
            <p>选择指定属性具有包含一个给定的子字符串的元素。（选择给定的属性是以包含某些值的元素）</p>
            <p>等等等，属性选择器还有几种表达方式，以下其中一种表达方式</p>
            <input name="man-news"/>
            <input name="milkman"/>
            <input name="letterman2"/>
            <input name="newmilk"/>
            <script>$('input[name*="man"]').val('has man is in it');</script>
        </div>

    </div>
</div>
<!--基础选择器-->
<div class="bg2">
    <div class="row container">
        <div class="span4" style="margin-left: 20px;">
            <img src="./img/icn-1.png" alt=""/>
            <h2 style="color:#ffffff; padding-top: 50px;">基础选择器</h2>
            <p style="color:#ffffff; padding-top: 10px;font-size: 20px;">Class Selector (".class")</p>
            <p style="color:#ffffff; padding-top: 10px;font-size: 50%;">描述: 选择给定样式类名的所有元素。</p>
            <p style="color:#ffffff; padding-top: 10px;font-size: 20px;">Element Selector ("element")</p>
            <p style="color:#ffffff; padding-top: 10px;font-size: 50%;">描述: 根据给定（html）标记名称选择所有的元素</p>
            <p style="color:#ffffff; padding-top: 10px;font-size: 20px;">ID Selector ("#id")</p>
            <p style="color:#ffffff; padding-top: 10px;font-size: 50%;">描述: 选择一个具有给定id属性的单个元素。</p>
            <p style="color:#ffffff; padding-top: 10px;font-size: 20px;">Multiple Selector ("selector1, selector2, selector N")
            </p>
            <p style="color:#ffffff; padding-top: 10px;font-size: 50%;">描述: 将每一个选择器匹配到的元素合并后一起返回。</p>
            <p style="color:#ffffff; padding-top: 10px;font-size: 20px;">Element Selector ("element")示例</p>
            <div class="d" style="width:20px;height: 20px; ">div1</div>
            <div class="d" style="width:20px;height: 20px; ">div2</div>
            <span class="s" style="width:20px;height: 20px; ">div3</span>
        </div>
        <div class="span7" style="margin-top:-500px;float: right;">
            <img src="./img/2.png" alt=""/>
            <script>$(".d").css("border","9px solid red");</script>
        </div>

    </div>
</div>
<!--基础过滤-->
<div>
    <div class="row">
        <div class="span6" style="padding-left: 125px;">
            <img src="./img/3.png" alt=""/>
        </div>
        <div class="span6" style="margin-top: -600px;float: right;">

            <h2 style="color:#3399ff; padding-top: 50px;">基础过滤</h2>
            <p >1.animated Selector</p>
            <p >选择所有正在执行动画效果的元素.<a href="http://www.jquery123.com/animated-selector/">示例 </a></p>
            <p >2.eq() Selector</p>
            <p >在匹配的集合中选择索引值为index的元素。这些元素是给定索引是0到3。</p>
            <p >3.Even Selector</p>
            <p >选择所引值为偶数的元素，从 0 开始计数。 也可以查看 odd.
            </p>
            <p >4.gt() Selector</p>
            <p >选择匹配集合中所有大于给定index（索引值）的元素。</p>
            <p >2.eq() Selector</p>
            <p >在匹配的集合中选择索引值为index的元素。</p>
            <p >2.eq() Selector</p>
            <p >在匹配的集合中选择索引值为index的元素。</p>
            <p>......</p>
            <p>gt() Selector如图所示</p>
            <table border="1">
                <tr><td>td #0</td><td>td #1</td><td>td #2</td><td>td #3</td><td>td #4</td></tr>
                <tr><td>td #5</td><td>td #6</td><td>td #7</td><td>td #8</td><td>td #9</td></tr>
            </table>
            <script>
                $("td:gt(4)").css("backgroundColor","pink");
                $("td:gt(-1)").css("color","bule");
            </script>
        </div>

    </div>
</div>
<!--子元素过滤-->
<div class="bg2">
    <div class="row container">
        <div class="span4" style="margin-left: 20px;">
            <img src="./img/icn-1.png" alt=""/>
            <h2 style="color:#ffffff; padding-top: 50px;">子元素过滤</h2>
            <p>1.first-child Selector</p>
            <p>选择所有父级元素下的第一个子元素。</p>
            <p>2.first-of-type Selector</p>
            <p>选择所有相同的元素名称的第一个兄弟元素。</p>
            <p>3.last-child Selector</p>
            <p>选择所有父级元素下的最后一个子元素。</p>
            <p>4.last-of-type Selector</p>
            <p>5.nth-child（） Selector</p>
            <p>选择的他们所有父元素的第n个子元素。</p>
            <p>......</p>
            <p>5.nth-child（） Selector示例</p>
            <div>
                <span>噢耶耶噢啦啦</span>
                <span>噢耶耶噢啦啦</span>
                <span>噢耶耶噢啦啦</span>
            </div>
            <div>
                <span>噢耶耶噢啦啦</span>
                <span>噢耶耶噢啦啦</span>
                <span>噢耶耶噢啦啦</span>
            </div>
            <script>$("span:first-of-type").addClass("fot");</script>
        </div>
        <div class="span7" style="margin-top:-500px;float: right;">
            <img src="./img/4.png" alt=""/>
        </div>

    </div>
</div>
<!--内容过滤-->
<div>
    <div class="row">
        <div class="span6">
            <img src="./img/5.png" alt=""/>
        </div>
        <div class="span6" style="margin-top: -600px;float: right;">

            <h2 style="color:#3399ff; padding-top: 50px;">内容过滤</h2>
            <p >:contains() Selector</p>
            <p >选择所有包含指定文本的元素。</p>
            <p >:empty Selector</p>
            <p >选择所有没有子元素的元素（包括文本节点）。</p>
            <p >：has() Selector</p>
            <p >选择元素其中至少包含指定选择器匹配的一个种元素。</p>
            <p >:parent Selector</p>
            <p >选择所有含有子元素或者文本的父级元素。</p>
            <p>contains() Selector示例</p>
            <div>john</div>
            <div>fanny gold</div>
            <div>fanny lolita</div>
            <script>
                $("div:contains('fanny')").css("text-decoration","underline");
            </script>
        </div>

    </div>
</div>
<!--表单-->
<div class="bg2">
    <div class="row container">
        <div class="span4" style="margin-left: 20px;">
            <img src="./img/icn-1.png" alt=""/>
            <h2 style="color:#ffffff; padding-top: 50px;">表单</h2>
            <p>1.:button Selector</p>
            <p>选择所有按钮元素和类型为按钮的元素</p>
            <p>2.checkbox Selector</p>
            <p>选择所有类型为复选框的元素。</p>
            <p>3.checked Selector</p>
            <p>匹配所有勾选的元素。</p>
            <p>4.disabled Selector</p>
            <p>选择所有被禁用的元素。</p>
            <p>......</p>
            <p>button Selector示例</p>
            <p>这个效果就是如图所示了</p>

        </div>
        <div class="span7" style="margin-top:-650px;float: right;">
            <img src="./img/6.png" alt=""/>
        </div>

    </div>
</div>
<!--层  级-->
<div>
    <div class="row">
        <div class="span6">
            <img src="./img/7.png" alt=""/>
        </div>
        <div class="span6" >
            <h2 style="color:#3399ff; padding-top: 50px;">层  级</h2>
            <p >Child Selector ("parent > child")</p>
            <p >选择所有指定“parent”元素中指定的"child"的直接子元素。</p>
            <p >Next Siblings Selector ("prev ~ siblings")</p>
            <p >匹配 “prev” 元素之后的所有 兄弟元素。具有相同的父元素，并匹配过滤“siblings”选择器。</p>
            <p >Next Adjacent Selector ("prev + next")</p>
            <p >选择所有紧接在 “prev” 元素后的 “next” 元素</p>
            <p >Descendant Selector ("ancestor descendant")</p>
            <p >选择给定的祖先元素的所有后代元素。</p>
            <p>Child Selector ("parent > child") 示例</p>
            <ul class="top">
                <li>item1</li>
                <li>item2
                    <ul><li>aaaaa1</li></ul><ul><li>aaaaa2</li></ul><ul><li>aaaaa3</li></ul>
                </li>
                <li>item3</li>

            </ul>
            <script>
                $("ul.top >li").css("border","3px double red");
            </script>
        </div>

    </div>
</div>
<!--遍  历-->
<div class="bg2">
    <div class="row container">
        <div class="span4" style="margin-left: 20px;">
            <img src="./img/icn-1.png" alt=""/>
            <h2 style="color:#ffffff; padding-top: 50px;">遍  历</h2>
            <p>.add()	添加元素到匹配的元素集合。</p>
            <p>.addback()	添加堆栈中元素到当前集合，一个选择性的过滤选择器。</p>
            <p>.addself()	添加先前的堆栈元素集合到当前组合。</p>
            <p>.contents()	获得匹配元素集合中每个元素的子元素，包括文字和注释节点。</p>
            <p>.end()	终止在当前链的最新过滤操作，并返回匹配的元素的以前状态。</p>
            <p>.not()	从匹配的元素集合中移除指定的元素。</p>
            <p>Add()示例图</p>
            <div class="d2"></div>
            <div class="d2"></div>
            <div class="d2"></div>
            <script>$(".d2").css("border","2px solid red")
                            .add(".p")
                            .css("background","blue");
            </script>
        </div>
        <div class="span7" style="margin-top:-500px;float: right;">
            <img src="./img/8.png" alt=""/>
        </div>

    </div>
</div>
<!--遍历分类-->
<div>
    <div class="row">
        <div class="span6">
            <img src="./img/9.png" alt=""/>
        </div>
        <div class="span6" style="margin-top: -500px;float: right;">

            <h2 style="color:#3399ff; ">遍历祖先</h2>
            <p >Parent()	返回被选元素的直接父元素。</p>
            <p >Parents()	返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (html)。</p>
            <p >parentsUntil()	返回介于两个给定元素之间的所有祖先元素。</p>
            <h2 style="color:#3399ff;">遍历后代</h2>
            <p >children()	返回被选元素的所有直接子元素。</p>
            <p >find()	返回被选元素的后代元素，一路向下直到最后一个后代。</p>
            <p>示例</p>
            <div class="d3">
                <div style="width:200px;">div1
                <ul>ul
                    <li>li
                    <span class="span">span</span></li>
                </ul></div>
            </div>
            <div class="d3">
                <div style="width:200px;">div1
                    <ul>ul
                        <li>li
                            <span class="span">span</span></li>
                    </ul></div>
            </div>
            <script>
                $(document).ready(function() {
                    $(".span").parent().css({"color": "red", "border": "2px solid red"});
                })
            </script>
        </div>

    </div>
</div>




</body>
</html>
